﻿@model MVCToolkitWebExample.Models.InputModel
@using MVCToolkit.Controls
@using MVCToolkit.JSON

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

@using (Html.KOBeginForm(new { id = "ko-form" }, new { submit = "InputModel.addInputModel" }))
{
    <ul>
        <li>
            @Html.LabelFor(model => model.FirstName)
            @Html.MVCToolKitInputFor(model => model.FirstName, MVCToolkit.Controls.InputType.Search, new { style = "firstname" }, new { id = "1" },
            new[] { 
                new KOBinding<MVCToolkitWebExample.Models.InputModel>() { HtmlAttribute = "value", Expression = model => model.FirstName },
                new KOBinding<MVCToolkitWebExample.Models.InputModel>() { HtmlAttribute = "new", Expression = model => model.LastName },
            })
            @Html.ValidationMessageFor(model => model.FirstName)
        </li>

        <li>
            @Html.LabelFor(model => model.LastName)
            @Html.MVCToolKitInputFor(model => model.LastName, htmlAttributes: new { @class = "lastnameclass" }, dataAttributes: new { id = 2 },
            koBindAttributes:
            new[] {
                new KOBinding<MVCToolkitWebExample.Models.InputModel>() { HtmlAttribute = "new", Expression = model => model.LastName },
            })
            @Html.ValidationMessageFor(model => model.LastName)
        </li>

        <li>
            @Html.LabelFor(model => model.Password)
            @Html.MVCToolKitPasswordFor(model => model.Password, koCustomBindAttributes: new { valueUpdate="'afterkeydown'"  })
            @Html.ValidationMessageFor(model => model.Password)
        </li>

        <li>
            @Html.LabelFor(model => model.ConfirmPassword)
            @Html.MVCToolKitPasswordFor(model => model.ConfirmPassword)
            @Html.ValidationMessageFor(model => model.ConfirmPassword)
        </li>

        <li>
            @Html.LabelFor(model => model.IsMale)

            Male: 
            @Html.MVCToolKitRadioButtonFor(model => model.IsMale, true)

            Female:
            @Html.MVCToolKitRadioButtonFor(model => model.IsMale, false)
            @Html.ValidationMessageFor(model => model.IsMale)
        </li>

        <li>
            @Html.LabelFor(model => model.IsAbove18)
            @Html.MVCToolKitCheckBoxFor(model => model.IsAbove18)
            @Html.ValidationMessageFor(model => model.IsAbove18)
        </li>

        <li>
            @Html.LabelFor(model => model.PassportNumber)
            @Html.MVCToolKitInputFor(model => model.PassportNumber)
            @Html.ValidationMessageFor(model => model.PassportNumber)
        </li>

        @Html.MVCToolKitHiddenFor(model => model.Id)

        <li>
            Hobbies?
            @Html.MVCToolkitCheckboxListFor(model => model.Hobbies, Model.HobbyOptions)
        </li>

        <li>
            @Html.LabelFor(model => model.Email)
            @Html.MVCToolKitInputFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </li>

        <li>
            @Html.LabelFor(model => model.Age)
            @Html.MVCToolKitInputFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </li>

        <li>
            @Html.LabelFor(model => model.ElderBortherAge)
            @Html.MVCToolKitInputFor(model => model.ElderBortherAge)
            @Html.ValidationMessageFor(model => model.ElderBortherAge)
        </li>

        <li>
            <input type="submit" value="submit" />
        </li>

    </ul>
    
    <br />
    <Label>Password entered:</Label>
        <span data-bind = "text: Password"></span>
    <label>Confirmed Password entered</label>
        <span data-bind = "text: ConfirmPassword"></span>
}


<script type="text/javascript">

    $(function () {
        //activates KO
        ko.applyBindings(InputModel);
    });

    var InputModel = $.parseJSON('@Html.Raw(Model.ToJson())');
    InputModel = ko.mapping.fromJS(InputModel);

    InputModel.addInputModel = function () {
        if ($("#ko-form").valid()) {
            $.ajax({
                url: "/Input/KOPost/",
                type: 'post',
                data: ko.toJSON(this),
                contentType: 'application/json',
                success: function (result) {
                    alert(result);
                },
                error: function (error, status) {
                    //                error.responseText
                    debugger
                }
            });
        }
    };
</script>



